<template>
	<view class="container">
		<navbar :background="background" :bgSize='bgSize' title="商品列表" color='#fff'></navbar>
		<view class="linear-goods-list-bg">
			<image :src='hostUrl+"/static/images/cart_bg.png"'></image>
		</view>
		<view class="tab-wrap line-v-center">
			<view class="tab-item line-v-center" @tap='getCateTab'>
				<text :class="allBtnObj.act">{{allBtnObj.thirdCateName}}</text>
				<image :src='allBtnObj.showCateModal ? "../static/all-top.png":"../static/all.png"' class="all-icon">
				</image>
			</view>
			<view class="tab-item line-v-center" @tap='setPriceSort'>
				<text>价格</text>
				<view class="trigle-wrap">
					<view class="trigle-up" :class="[priceBtnObj.priceSort == 'price_asc' ? 'trigle-up-act':'']"></view>
					<view class="trigle-down" :class="[priceBtnObj.priceSort == 'price_desc' ? 'trigle-down-act':'']">
					</view>
				</view>
			</view>
			<view class="tab-item line-v-center" @tap='setTimeSort'>
				<text>时间</text>
				<view class="trigle-wrap">
					<view class="trigle-up" :class="[timeBtnObj.timeSort == 'time_asc' ? 'trigle-up-act':'']"></view>
					<view class="trigle-down" :class="[timeBtnObj.timeSort == 'time_desc' ? 'trigle-down-act':'']">
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="main" id='main' :style="{height:scrollViewHeight+'px'}" scroll-y="true"
			scroll-with-animation="true" @scrolltolower='loadData' refresher-background='#F2F4F7'
			:refresher-triggered='refresherTriggered' refresher-enabled='true' @refresherrefresh='refreshList'>
			<view v-if='showPage'>
				<load-page></load-page>
			</view>
			<view class="goods-wrap" v-else>
				<template v-if='goodsList.length > 0'>
					<view class="goods-con">
						<view class="goods-item-con" v-for='(item,index) in goodsList'
							@tap='toGoodsDetail(item.goods_id)'>
							<small-goods-item :item='item' @addCart='addCart'
								:Authorization='Authorization'></small-goods-item>
						</view>
					</view>
					<loading :loadEnd='loadEnd'></loading>
				</template>
				<view v-else>
					<no-data></no-data>
				</view>
			</view>
		</scroll-view>

		<view class="cate-wrap-modal" :style="{height:scrollViewHeight+'px',top:modalTop+'px'}" v-if='showModal' @tap='closeCateModal' @touchmove.stop.prevent='stopMove'></view>
		<view class="cate-wrap" :style="{top:modalTop+'px'}" :animation="allBtnObj.animationData"
			:class="allBtnObj.aniName" @touchmove.stop.prevent='stopMove'>
			<view class="cate-con">
				<scroll-view class="first-cate-wrap cate-scroll" scroll-y="true" :scroll-top="firstScrollTop"
					scroll-with-animation="true">
					<view class="first-cate-con">
						<view class="first-cate-item line-center"
							:class="[firstCateId == item.category_id? 'first-cate-item-act':'']"
							v-for='(item,index) in firstCateList' @tap='switchFirstCate'
							:id="'first_cate_item'+item.category_id" :data-id="item.category_id">
							<view class="first-cate-item-text line-ellipsis">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="second-cate-wrap cate-scroll" scroll-y="true">
					<view class="second-cate-con">
						<view class="second-cate-item line-center"
							:class="[secondCateId == item.category_id? 'second-cate-item-act':'']"
							v-for='(item,index) in secondCateList' @tap='switchSecondCate'
							:id="'second_cate_item'+item.category_id" :data-id="item.category_id" :data-name='item.name'>
							{{item.name}}
							<view class="check-icon" v-if='secondCateId == item.category_id'>
								<uni-icons type='checkbox' color="#1EB368" size='14'></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="third-cate-wrap cate-scroll" scroll-y="true">
					<view class="third-cate-con">
						<view class="third-cate-item line-center"
							:class="[thirdCateId == item.category_id? 'third-cate-item-act':'']"
							v-for='(item,index) in thirdCateList' @tap='bindThirdCate(item.category_id,item.name)'>
							{{item.name}}
							<view class="check-icon" v-if='thirdCateId == item.category_id'>
								<uni-icons type='checkbox' color="#1EB368" size='14'></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="btn-wrap line-center">
				<button class="sure-btn line-center" @tap='toConfirm' :disabled="isDisabled">确定</button>
			</view>
		</view>
		<!-- sku弹窗 -->
		<sku-modal :skuMode='1' :goods="goodsDetail" ref='skuModal'></sku-modal>
	</view>
</template>

<script>
	const app = getApp();
	let options;
	var animation = uni.createAnimation({
		duration: 300,
		timingFunction: 'linear',
	});
	import smallGoodsItem from '@/components/small-goods-item/small-goods-item.vue';
	import skuModal from '@/components/sku-modal/sku-modal.vue';
	export default {
		components: {
			smallGoodsItem,
			skuModal
		},
		data() {
			return {
				background: `url(${app.globalData.hostUrl}/static/images/cart_bg.png)`,
				bgSize: '100% 344rpx',
				hostUrl: app.globalData.hostUrl,
				scrollViewHeight: 0,
				modalTop: 0,
				showModal: false,
				refresherTriggered: true,
				//点击全部按钮操作
				allBtnObj: {
					showCateModal: false,
					thirdCateName: '全部',
					act: '',
					animationData: '',
				},
				sortType: 'all',
				//点击价格按钮排序
				priceBtnObj: {
					isFlag: false,
					priceSort: ''
				},
				//点击时间按钮排序
				timeBtnObj: {
					isFlag: false,
					timeSort: ''
				},
				firstCateIndex: 0,
				firstCateId: '',
				firstCateList: [],
				firstScrollTop: 0,
				secondCateIndex: 0,
				secondCateId: '',
				secondCateName:'',
				secondScrollTop: 0,
				secondCateList: [],
				thirdCateIndex: 0,
				thirdCateId: '',
				thirdCateName:'',
				thirdCateList: [],
				goodsList: [],
				page: 1,
				totalPage: '',
				showPage: true,
				loadEnd: false,
				showSkuPopup: false,
				goodsDetail: {},
				Authorization: '',
				isDisabled:false,
			};
		},
		onShow() {
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			console.log('Authorization', this.Authorization)
		},
		onLoad(option) {
			options = option;
			this.firstCateId = options.first_cate_id ? options.first_cate_id : '';
			this.secondCateId = options.second_cate_id ? options.second_cate_id : '';
			this.thirdCateId = options.third_cate_id ? options.third_cate_id : '';
			this.allBtnObj.thirdCateName = options.name ? options.name : '全部';
			this.thirdCateName = this.allBtnObj.thirdCateName;
			this.allBtnObj.act = 'all-act';
			this.getScrollHeight()
			this.getFirstCate()
		},
		methods: {
			getFirstCate() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: 0,
					}
				}).then(res => {
					if (res.code == 0) {
						that.firstCateList = res.data;
						if (res.data.length > 0) {
							that.getSecondCate();
						}
					}
				})
			},
			getSecondCate(type = 0) { //0 -- 从分类点击进来  1 -- 点击切换一级分类时
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: that.firstCateId,
					}
				}).then(res => {
					if (res.code == 0) {
						that.secondCateList = res.data;
						if (res.data.length > 0) {
							if (type == 0) that.getThirdCate();
						}
					}
				})
			},
			getThirdCate(type = 0) { //0 -- 从分类点击进来  1 -- 点击切换一级分类时
				console.log('type', type)
				const that = this;
				that.loadingPage = true;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: that.secondCateId,
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						that.thirdCateList = res.data;
						if (res.data.length > 0) {
							if (type == 0) that.getGoodsList();
						}
					}
				})
			},
			switchFirstCate(e) {
				let that = this,
					off_top_num = e.currentTarget.offsetTop,
					id = e.currentTarget.dataset.id,
					firstCateList = that.firstCateList,
					scrollTop = 0,
					cateScrollViewHeight = uni.upx2px(960);
				if (that.firstCateId == id) {
					return;
				}
				that.firstCateId = id;
				that.isDisabled = true;
				uni.createSelectorQuery().select(`#first_cate_item${id}`).boundingClientRect(function(rect) {
					if (off_top_num < cateScrollViewHeight / 2) {
						scrollTop = 0;
					} else {
						scrollTop = off_top_num - cateScrollViewHeight / 2 + rect.height / 2;
					}
					that.firstScrollTop = scrollTop;
				}).exec();
				that.secondCateList = [];
				that.thirdCateList = [];
				that.secondCateId = '';
				that.thirdCateId = '';
				that.getSecondCate(1);
			},
			switchSecondCate(e) {
				let that = this,
					off_top_num = e.currentTarget.offsetTop,
					id = e.currentTarget.dataset.id,
					name = e.currentTarget.dataset.name,
					secondCateList = that.secondCateList,
					scrollTop = 0,
					cateScrollViewHeight = uni.upx2px(970);
				if (that.secondCateId == id) {
					return;
				}
				that.secondCateId = id;
				that.secondCateName = name;
				uni.createSelectorQuery().select(`#second_cate_item${id}`).boundingClientRect(function(rect) {
					if (off_top_num < cateScrollViewHeight / 2) {
						scrollTop = 0;
					} else {
						scrollTop = off_top_num - cateScrollViewHeight / 2 + rect.height / 2;
					}
					that.secondScrollTop = scrollTop;
				}).exec();
				that.thirdCateList = [];
				that.thirdCateId = '';
				this.isDisabled = false;
				that.getThirdCate(1);
			},
			bindThirdCate(id, name) {
				let thirdCateList = this.thirdCateList;
				this.thirdCateId = id;
				this.thirdCateName = name;
				this.isDisabled = false;
			},
			toConfirm(){
				console.log('this.thirdCateId',this.thirdCateId)
				console.log('this.thirdCateName',this.thirdCateName)
				if(this.thirdCateId){
					this.allBtnObj.thirdCateName = this.thirdCateName;
				}else{
					this.allBtnObj.thirdCateName = this.secondCateName;
					this.thirdCateId = this.secondCateId;
				}
				this.allBtnObj.act = 'all-act';
				this.showModal = false;
				this.allBtnObj.showCateModal = false;
				animation.height("0rpx").step();
				this.allBtnObj.animationData = animation.export();
				this.showPage = true;
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
				this.getGoodsList()
			},
			getGoodsList() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.goodList,
					data: {
						sortType: that.sortType,
						categoryId: that.thirdCateId,
						page: that.page,
						limits: 15
					}
				}).then(res => {
					that.showPage = false;
					if (res.code == 0) {
						that.goodsList = that.goodsList.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				})
			},
			addCart(obj) {
				this.goodsDetail = obj;
				this.$refs.skuModal.toShowSkuPopup();
				// this.showSkuPopup = !this.showSkuPopup;
			},
			refreshList() {
				this.refresherTriggered = true;
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
				this.getGoodsList();
				setTimeout(() => {
					this.refresherTriggered = false;
				}, 100)
			},
			loadData() {
				let that = this;
				if (that.page < that.totalPage) {
					this.loadEnd = false;
					that.page++;
					that.getGoodsList()
				} else {
					return;
				}
			},
			toGoodsDetail(id) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${id}`
				})
			},
			getScrollHeight() {
				const tabHeight = uni.upx2px(88),
					navbarHeight = app.globalData.headAllHeight,
					elseHeight = tabHeight + navbarHeight;
				this.modalTop = elseHeight;
				this.scrollViewHeight = app.globalData.screenHeight - elseHeight;
			},
			//点击全部按钮
			getCateTab() {
				if (this.allBtnObj.showCateModal) {
					animation.height("0rpx").step();
					this.allBtnObj.animationData = animation.export();
					this.allBtnObj.showCateModal = false;
					this.showModal = false;
					// this.allBtnObj.act = '';
				} else {
					animation.height("1118rpx").step();
					this.allBtnObj.animationData = animation.export();
					this.allBtnObj.showCateModal = true;
					this.showModal = true;
					this.allBtnObj.act = 'all-act';
				}
			},
			setPriceSort() {
				let priceSort = this.priceBtnObj.priceSort,
					isFlag = this.priceBtnObj.isFlag;
				isFlag = !isFlag;
				if (isFlag) {
					priceSort = 'price_asc'
				} else {
					priceSort = 'price_desc'
				}
				this.priceBtnObj.isFlag = isFlag;
				this.priceBtnObj.priceSort = priceSort;
				this.timeBtnObj.isFlag = false;
				this.timeBtnObj.timeSort = '';
				this.sortType = priceSort;
				this.showPage = true;
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
				this.getGoodsList()
			},
			setTimeSort() {
				let timeSort = this.timeBtnObj.timeSort,
					isFlag = this.timeBtnObj.isFlag;
				isFlag = !isFlag;
				if (isFlag) {
					timeSort = 'time_asc'
				} else {
					timeSort = 'time_desc'
				}
				this.timeBtnObj.isFlag = isFlag;
				this.timeBtnObj.timeSort = timeSort;
				this.priceBtnObj.isFlag = false;
				this.priceBtnObj.priceSort = '';
				this.sortType = timeSort;
				this.showPage = true;
				this.goodsList = [];
				this.page = 1;
				this.totalPage = '';
				this.getGoodsList()
			},
			closeCateModal(){
				this.showModal = false;
				this.allBtnObj.showCateModal = false;
				animation.height("0rpx").step();
				this.allBtnObj.animationData = animation.export();
			},
			stopMove(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	$sub-color: #1EB368;

	.tab-wrap {
		width: 100%;
		height: 88rpx;
		background: $supplier-page-color;
		padding: 0 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: relative;
		z-index: 2;

		.tab-item {
			height: 100%;
		}

		.all-icon {
			width: 20rpx;
			height: 20rpx;
			margin-left: 5rpx;
		}

		.all-act {
			color: $sub-color;
		}

		.trigle-wrap {
			// margin-top: 4rpx;
			margin-left: 10rpx;

			.trigle-up {
				width: 0;
				height: 0;
				border-top: 4px solid transparent;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				border-bottom: 4px solid #CCCCCC;
			}

			.trigle-up-act {
				border-top: 4px solid transparent;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				border-bottom: 4px solid $sub-color;
			}

			.trigle-down {
				width: 0;
				height: 0;
				border-top: 4px solid #CCCCCC;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				border-bottom: 4px solid transparent;
				margin-top: 5rpx;
			}

			.trigle-down-act {
				border-top: 4px solid $sub-color;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				border-bottom: 4px solid transparent;
			}
		}
	}

	.main {
		width: 100%;
		background: $supplier-page-color;
		position: relative;
		z-index: 2;
	}

	.goods-wrap {
		margin: 0 24rpx;
		padding: 24rpx 0 50rpx;

		.goods-con {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 226rpx);
			justify-content: space-between;
			column-gap: 8rpx;
			row-gap: 16rpx;
		}

		.goods-item-con {

			.select {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 12rpx;
				top: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.cate-wrap-modal {
		width: 100%;
		background: rgba(0, 0, 0, 0.37);
		position: fixed;
		left: 0;
		z-index: 22;
	}

	.cate-wrap {
		width: 100%;
		height: 0rpx;
		background: #fff;
		border-top: 1rpx solid #DEDBDB;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		z-index: 22;
		overflow: hidden;
		.cate-con{
			display: flex;
		}
	}

	.cate-scroll {
		width: 100%;
		height: 960rpx;
	}

	.first-cate-wrap {
		width: 152rpx;
		background: #F0F0F0;
		flex-shrink: 0;

		.first-cate-item {
			width: 100%;
			height: 88rpx;
			font-size: 24rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			text-align: center;

			.first-cate-item-text {
				width: 100%;
				-webkit-line-clamp: 2;

			}
		}

		.first-cate-item-act {
			background: #fff;
			position: relative;
			color: $sub-color;
			font-weight: bold;

			&:after {
				content: '';
				width: 8rpx;
				height: 30rpx;
				border-radius: 15rpx;
				background: $sub-color;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}

	.second-cate-wrap {
		width: 234rpx;
		flex-shrink: 0;

		.second-cate-item {
			width: 100%;
			height: 88rpx;
			font-size: 24rpx;
		}

		.second-cate-item-act {
			background: #fff;
			position: relative;
			color: $sub-color;
			font-weight: bold;
			
		}
	}
	.check-icon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 24rpx;
		top: 30rpx;
		margin: auto;
		font-weight: normal;
	}

	.third-cate-wrap {
		flex: 1;

		.third-cate-item {
			width: 100%;
			height: 88rpx;
			font-size: 24rpx;
		}

		.third-cate-item-act {
			position: relative;
			color: $sub-color;
			font-weight: bold;
			// .check-icon {
			// 	width: 30rpx;
			// 	height: 30rpx;
			// 	position: absolute;
			// 	right: 24rpx;
			// 	top: 27rpx;
			// 	margin: auto;
			// 	font-weight: normal;
			// }
			
		}
	}
	.btn-wrap{
		width: 100%;
		height: 132rpx;
		background: #fff;
		border-top: 2rpx solid #DEDBDB;
		.sure-btn{
			width: 602rpx;
			height: 96rpx;
			background: #5DC751;
			border-radius: 48rpx;
			font-size: 36rpx;
			color:#fff
		}
		
	}
	/* .sure-btn[disabled]:not([type]),
	.sure-btn[disabled][type=default] {
		opacity: 0.8;
	} */
</style>